<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-cloak指令</title>
    <style>
        /*选择有v-cloak属性的标签*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="root">
    <h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="../../js/vue.js"></script>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷'
        }
    })

    /**
     * v-cloak指令,没有值:
     *      本质是一种特殊属性,vue实例创建完毕并接管容器后,会删掉v-cloak属性
     *      使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题:
     *          一开始标签上加入v-cloak属性
     *          当网速慢的时候,vue没有接管容器,v-cloak属性还没有被删除
     *          并且设置了[v-cloak] {display: none;}将有这个属性的标签进行隐藏
     *          当vue接管容器之后,再将v-cloak属性移除,这样隐藏的标签就再次出现
     *
     */
</script>
</html>




